<template>
  <div class="profile-page-bg">
    <div class="profile-main-card">
      <div class="profile-flex">
        <div class="profile-avatar-col">
          <el-upload
            :show-file-list="false"
            :http-request="handleAvatarUpload"
            class="avatar-upload-wrapper"
          >
            <el-avatar :size="96" :src="deliverymanInfo.avatar || userStore.getPic || '/static/avatar.png'" class="profile-avatar" />
          </el-upload>
          <div class="profile-nickname">{{ deliverymanInfo.name }}</div>
          <el-tag :type="getStatusType(deliverymanInfo.workStatus)" class="profile-status-tag">
            {{ getStatusText(deliverymanInfo.statusText) }}
          </el-tag>
        </div>
        <div class="profile-info-col">
          <el-descriptions :column="2" border class="profile-descriptions">
            <el-descriptions-item label="手机号">{{ deliverymanInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ deliverymanInfo.gender }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ deliverymanInfo.age }}</el-descriptions-item>
            <el-descriptions-item label="所属站点">{{ deliverymanInfo.site }}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{ deliverymanInfo.registerTime }}</el-descriptions-item>
          </el-descriptions>
          <div class="profile-actions">
            <el-button type="primary" @click="showEditDialog">编辑信息</el-button>
          </div>
        </div>
      </div>
      <div class="profile-stats-row">
        <div class="profile-stat-card">
          <div class="stat-label">累计配送单数</div>
          <div class="stat-value">{{ deliverymanInfo.totalOrders }}</div>
        </div>
        <div class="profile-stat-card">
          <div class="stat-label">累计收入</div>
          <div class="stat-value stat-green">¥{{ deliverymanInfo.totalIncome }}</div>
        </div>
        <div class="profile-stat-card">
          <div class="stat-label">评分</div>
          <div class="stat-value">
            <el-rate v-model="deliverymanInfo.rating" disabled show-score text-color="#10b981" score-template="{value} 分" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getDeliverymanInfo } from '@/assets/delivery.js'
import { uploadAvatar } from '@/assets/user.js'
import { useUserStore } from '@/pinia/index.js'
import { CameraFilled } from '@element-plus/icons-vue'

const userStore = useUserStore()
const deliverymanInfo = ref({})

const getStatusType = (workStatus) => {
  // 1=忙碌 0=空闲 2=离线
  const map = { 0: 'success', 1: 'warning', 2: 'info' }
  return map[workStatus] || 'info'
}
const getStatusText = (statusText) => {
  return statusText || '未知'
}

const showEditDialog = () => {
  ElMessage.info('编辑功能待实现')
}

// 头像上传（仅前端本地显示，不上传后端）
const handleAvatarUpload = async (option) => {
  const file = option.file
  const reader = new FileReader()
  reader.onload = (e) => {
    const url = e.target.result
    deliverymanInfo.value.avatar = url
    userStore.setPic(url) // 同步到Pinia，导航栏也会同步
    ElMessage.success('头像已更新')
  }
  reader.readAsDataURL(file)
}

onMounted(async () => {
  const res = await getDeliverymanInfo()
  if (res.data && res.data.code === 200) {
    deliverymanInfo.value = res.data.data
    if (res.data.data.avatar) {
      userStore.setAvatar(res.data.data.avatar)
    }
  }
})
</script>

<style scoped>
.profile-page-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 0;
}
.profile-main-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(16,185,129,0.08);
  max-width: 820px;
  width: 100%;
  padding: 36px 36px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.profile-flex {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.profile-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  gap: 12px;
}
.profile-avatar {
  border: 3px solid #e5e7eb;
  box-shadow: 0 2px 8px 0 rgba(16,185,129,0.08);
}
.profile-nickname {
  font-size: 22px;
  font-weight: 700;
  margin-top: 8px;
  color: #22223b;
}
.profile-status-tag {
  margin-top: 4px;
  font-size: 14px;
}
.profile-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-descriptions {
  background: #f5f7fa;
  border-radius: 10px;
  padding: 18px 18px 8px 18px;
  box-shadow: 0 2px 8px 0 rgba(16,185,129,0.03);
}
:deep(.el-descriptions__label) {
  width: 90px;
  color: #6b7280;
  font-size: 15px;
  padding: 12px 0 12px 0;
}
:deep(.el-descriptions__content) {
  color: #303133;
  font-size: 16px;
  padding: 12px 0 12px 0;
}
:deep(.el-descriptions__cell) {
  padding: 12px 10px !important;
}
.profile-actions {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-button {
  min-width: 90px;
  border-radius: 20px;
}
.profile-stats-row {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-top: 8px;
}
.profile-stat-card {
  flex: 1;
  background: #f5f7fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(16,185,129,0.04);
  padding: 18px 0 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #22223b;
}
.stat-green {
  color: #10b981;
}
@media (max-width: 900px) {
  .profile-main-card {
    padding: 18px 2vw 18px 2vw;
    max-width: 98vw;
  }
  .profile-flex {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .profile-stats-row {
    flex-direction: column;
    gap: 16px;
  }
}
.avatar-upload-wrapper {
  position: relative;
  display: inline-block;
}
.avatar-upload-btn {
  display: none;
}
</style>
